<template>
  <content-box>
    <template #title>{{ props.isMemory ? '运行内存' : 'CPU' }}</template>
    <template #content>
      <div class="memory">
        <div class="echart-wrapper">
          <div class="echart-wrapper__title">100%（已使用）</div>
          <div id="echarts-dom-circle" ref="echartDom"></div>
        </div>
        <div v-if="props.isMemory" class="table-header">
          <div class="table-header__title">常驻内存</div>
          <div class="table-header__title">虚拟内存</div>
        </div>
        <div class="table-list">
          <div v-for="(item, index) in tableData" :key="index" class="table-list__item">
            <div class="item__title">{{ item.name }}</div>
            <div class="item__value">
              <template v-if="props.isMemory">
                <div class="item__value__item">{{ item.memRss }} MB</div>
                <div class="item__value__item">{{ item.memVsz }} MB</div>
              </template>
              <template v-else>
                <div class="item__value__item">{{ (item.cpu * 10).toFixed(2) }} %</div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
  </content-box>
</template>

<script setup lang="ts">
import { defineProps, ref, onMounted, watch, computed } from 'vue'
import ContentBox from './ContentBox.vue'
import echarts from './echartsDep'
import type { EChartsOption } from './echartsDep'

const props = defineProps({
  deviceDetail: {
    type: Object,
    default: () => ({})
  },
  isMemory: {
    type: Boolean,
    default: true
  }
})

const RECORD_TIME = 60
const sortIndex = props.isMemory ? [0, 5] : [1, 6]
const tableData = computed(() => {
  const data = JSON.parse(JSON.stringify(props.deviceDetail.processList))
  const List = props.isMemory
    ? data.sort((a, b) => b.mem - a.mem)
    : data.sort((a, b) => b.cpu - a.cpu)
  return List.slice(...sortIndex).map((item) => {
    return {
      name: item.name,
      memVsz: item.memVsz.toFixed(2),
      memRss: item.memRss.toFixed(2),
      cpu: item.cpu
    }
  })
})

const echartDom = ref(null)
let myChart
onMounted(() => {
  myChart = echarts.init(echartDom.value)
  updateEchart()
})

let data: Array<number>[] = []
const updateEchart = (): void => {
  const nowTime = new Date().getTime()

  const usedMemory = props.deviceDetail.usedMemory / props.deviceDetail.totalMemory
  const usedCpu = props.deviceDetail.usedCpu / 100
  data.push([nowTime, props.isMemory ? usedMemory : usedCpu || 0])

  const minTime = nowTime - 1000 * RECORD_TIME
  const arrMaxLen = RECORD_TIME / 2 + 5
  if (data.length > arrMaxLen) data.shift()
  const option: EChartsOption = {
    xAxis: {
      type: 'time',
      min: minTime,
      max: nowTime,
      axisLabel: {
        show: false // 隐藏y轴数字显示
      },
      axisTick: {
        show: false // 隐藏刻度线
      }
    },
    yAxis: {
      type: 'value',
      splitNumber: 2, // 修改间隔数
      min: 0,
      max: 1,
      axisLabel: {
        show: false // 隐藏y轴数字显示
      },
      splitLine: {
        lineStyle: {
          width: 0.5,
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data,
        color: props.isMemory ? '#f09e23' : 'blue',
        type: 'line',
        areaStyle: {},
        showSymbol: false,
        lineStyle: {
          width: 2
        }
      }
    ]
  }
  myChart.setOption(option)
}
watch(props.deviceDetail, () => {
  updateEchart()
})
</script>

<style lang="less" scoped>
@text-gray: #ababab;
.memory {
  width: 100%;
}
.echart-wrapper {
  position: relative;
  width: 100%;
  height: 70px;
  &__title {
    position: absolute;
    color: @text-gray;
    font-size: 10px;
    top: 10px;
    left: 3px;
  }
}
#echarts-dom-circle {
  position: absolute;
  width: 360px;
  height: 100px;
  top: -5px;
  left: -30px;
}
.table-header {
  display: flex;
  justify-content: flex-end;
  &__title {
    width: 50px;
    color: @text-gray;
    font-size: 10px;
    margin-left: 25px;
    text-align: right;
  }
}
.table-list {
  margin-top: 5px;
  &__item {
    display: flex;
    justify-content: space-between;
    height: 24px;
    line-height: 24px;
  }
  .item__title {
    color: #b8b8b8;
    font-size: 12px;
  }
  .item__value {
    display: flex;
    text-align: right;
    &__item {
      margin-left: 12px;
      color: #ffffff;
      font-weight: bold;
      font-size: 10px;
    }
  }
}
</style>
